<template>
	<view class="page-section page-section-gap">
		<map style="width: 100%; height: 300px;" @callouttap='markertap' :latitude="latitude"
			:longitude="longitude" :markers="covers" scale='12'>
		</map>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 30.59276,
				longitude: 114.30525,
				covers: [
				// 	{
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	iconPath: '../../../static/location.png'
				// }, {
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	iconPath: '../../../static/location.png'
				// },
				]
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		onLoad(options) {
			if(options && options.lat){
				this.latitude = options.lat
				this.longitude = options.lng
			}
			this.fetchData()
			// this.getLocation()
		},
		methods: {
			async fetchData() {
				const {
					data
				} = await this.beg.request({
					url: `${this.api.storeinfo}/${this.storeId}`,
				})
				this.covers = {
					id: +data.id,
					latitude: +data.lat,
					longitude:  +data.lng,
					width: '25',
					height: '25',
					callout: {
						content: data.name + '>',
						color: '#333',
						fontSize: 14,
						borderRadius: 3,
						bgColor: '#fff',
						padding: 7,
						display: 'ALWAYS',
						textAlign: 'center',
					},
				}
			},
			markertap(e) {
				console.log('markertap', e)
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>